<template> 
  <div class="order-withdraw-modal">
    <el-dialog :title="modalOrderData.title" v-if="modalOrderData.action != null" :visible.sync="modalOrderData.show"
               @close='hidden'> 
      <el-form class="small-space" ref="adjustTypeFrom" label-position="right" label-width="8rem">
          <div>
            <el-card>                
                <el-row>
                    <el-col :md="12" style="margin-left: -20px; margin-right:20px;">
                        <el-form label-width="150px">
                            <el-form-item :label="$t('order.id')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.id" size="sm"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('order.mch_id')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.mch_id" size="sm"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('order.justpay_order_no')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.out_trade_no" size="sm"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('order.user_id')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.user_id" size="sm"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('order.amount')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.total_fee" size="sm"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('order.real_amount')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.real_amount" size="sm"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('order.created_at')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.created_at" size="sm"></el-input>
                            </el-form-item>
                            
                            <el-form-item :label="$t('order.updated_at')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.updated_at" size="sm"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>

                    <el-col :md="12" style="">
                        <el-form label-width="120px">
                            <el-form-item :label="$t('order.card_name')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.bankcard_name" size="sm"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('order.bankrecod_id')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.record_id" size="sm"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('order.payed_at')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.payed_at" size="sm"></el-input>
                            </el-form-item>  
                            <el-form-item :label="$t('order.status')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-select v-model="modalOrderData.selectedOrder.status" :placeholder="$t('order.select') + $t('order.status')" v-if="modalOrderData.current_status === 0">
                                 <el-option v-for="(statu, index) of OrderStatusArray" :key="index" :label="statu" :value="index"></el-option>
                                </el-select>
                                <el-input v-else plaintext :value="OrderStatusArray[modalOrderData.current_status]"  type="text" size="sm"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('order.notes')" label-cols="4" :horizontal="true" label-size="sm" 
                              v-if="modalOrderData.selectedOrder.status === '4' || modalOrderData.current_status === 4">
                              <el-input v-model="modalOrderData.selectedOrder.notes" :readonly="modalOrderData.current_status === 4?true:false" plaintext type="text" size="sm"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('order.notify_status')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext  readonly type="text" v-model="modalOrderData.NotifyStatusArray[modalOrderData.selectedOrder.notify_status]" size="sm"></el-input>
                            </el-form-item>

                            <el-form-item :label="$t('order.operator')" label-cols="4" :horizontal="true" label-size="sm">
                                <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.operator" size="sm"></el-input>
                            </el-form-item>
                            
                        </el-form>        
                    </el-col>
                </el-row>
            </el-card>
          </div>          
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modalOrderData.show=false">{{$t('order.cancel')}}</el-button>
        <!--<el-button type="primary" :loading="loading" @click="onOk" v-if="modalOrderData.current_status === 0">{{modalOrderData.okTitle}}</el-button>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { editOrder } from '@/api/merchant';
  import i18n from '@/lang/index';

  export default {
    name: 'OrderModal',
    data() {
      return {
        loading: false
      }
    },
    props: {
      modalOrderData: Object
    },
    methods: {
      transInqStatus(status) {
        let stat = '';
        if(status) {
          if(status < 4) {
            stat = i18n.t('order.orderInquiryStatus.' + status);        
          }
        }
        return stat;
      },
      onOk() {
        this.modalOrderData.selectedOrder.notes = this.modalOrderData.selectedOrder.notes ? this.modalOrderData.selectedOrder.notes.trim() : this.modalOrderData.selectedOrder.notes
        if(this.modalOrderData.selectedOrder.status === '4' && !this.modalOrderData.selectedOrder.notes ){
           this.$message({type: 'warning', message: this.$t('order.note_warning')})
        } else {
          let order = this.modalOrderData.selectedOrder
          let data = {id: order.id, status: order.status, notes: order.notes}
          data = JSON.parse(JSON.stringify(data))

          editOrder(data).then(res => {
            if (res.status === 0) {
              this.listLoading = false
              this.$emit('ok')
              this.$message({ type: 'success', message: i18n.t('order.edit_success') })
              this.modalOrderData.show = false
            }            
          }).catch(() => {
            this.$message({
                type: 'info',
                message: i18n.t('order.edit_failed')
            })
          })
        }
      },
      hidden() {
        this.modalOrderData.selectedOrder = {}
      } 
    },
    computed: {
       OrderStatusArray: function() {
       return {0: this.$t('order.unpaid'), 
               2: this.$t('order.success'), 
               4: this.$t('order.manual_success')
              }
      }      
    }
  }
</script>
